<template>
  <div ref="chartView"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const { proxy: app } = getCurrentInstance();
// 1. 得到echarts对象【这里将echarts对象配置在全局变量中】
// echarts术语速查 <https://echarts.apache.org/zh/cheat-sheet.html>
const echarts = app.$echarts;

// 2. 定义引用元素
const chartView = ref();

// 3. 挂载完成时初始化图表
onMounted(async () => {
    // 创建图表对象，设置渲染方式、宽高等
    // 第2个参数为主题, 默认light
  let chart = echarts.init(chartView.value, 'light', {
    renderer: "canvas",
    devicePixelRatio: 2,
    height: '300',
    width: 1280,
  });
  // 异步加载数据后初始化图表
  await initLineChart(chart);
});
// 4. 异步加载数据后初始化图表
async function initLineChart(chart) {
  // 配置项 <https://echarts.apache.org/zh/option.html#title>
  let option = {
    title: { text: "ECharts 示例" },
    xAxis: {
      type: "category",
      data: ["周一", "Tue", "Wed", "Thu", "Fri", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  // 给图表设置配置项
  chart.setOption(option);
}
</script>

<style lang="scss" scoped></style>
